<template>
  <div class="login">
    <a-card class="login_table">
      <p class="font_sty">login</p>
      <a-form
        :model="user"
        name="basic"
        autocomplete="off"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="用户名"
          name="username"
          :rules="[{ required: true, message: '请输入你的用户名!' }]"
        >
          <a-input v-model:value="user.username" />
        </a-form-item>

        <a-form-item
          label="密 码"
          name="password"
          :rules="[{ required: true, message: '请输入你的密码!' }]"
        >
          <a-input-password v-model:value="user.password" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit" class="go_btn"
            >提交</a-button
          >
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { reactive } from "vue";
import { message } from "ant-design-vue";
import userApi from "@/apis/userApi";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "login",
  setup() {
    const store = useStore();
    const router = useRouter();
    const user = reactive({
      username: "",
      password: "",
    });

    const access = localStorage.getItem("access");
    const userInfo = localStorage.getItem("userInfo");
    if (access && userInfo) {
      store.commit("setAccess", access);
      store.commit("setUserInfo", JSON.parse(userInfo));
    }

    const onFinish = () => {
      userApi.login(user).then((res) => {
        store.commit("setAccess", res.access);
        store.commit("setUserInfo", res.userInfo);
        router.push({ name: "home" });
      });
    };
    const onFinishFailed = () => {
      message.error("密码错误", 2);
    };

    return {
      user,
      onFinish,
      onFinishFailed,
    };
  },
};
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("http://mms0.baidu.com/it/u=1742747518,1294199691&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=600&h=314");
  background-size: cover;
}
.login_table {
  width: 510px;
  height: 325px;
  background: linear-gradient(
    to right bottom,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.4)
  );
  /* 使背景模糊化 */
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px #a29bfe;
  border-radius: 15px;
}
.go_btn {
  text-align: center;
  display: block;
  /* height: 24px;
  padding: 12px; */
  /* font: 900 20px ""; */
  width: 10vw;
  border-radius: 10px;
  margin-top: 20px;
  color: #fff;
  letter-spacing: 3px;
  background-image: linear-gradient(to left, #fd79a8, #a29bf6);
}
.font_sty {
  font: 900 40px "";
  text-align: center;
  letter-spacing: 5px;
  color: #3d3d3d;
}
</style>